<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>项目详情</title>
		<link rel="stylesheet" type="text/css" href="css/elementui.css" />
		<link rel="stylesheet" href="http://at.alicdn.com/t/font_915177_bgcrxumfo6l.css">
		<link rel="stylesheet" type="text/css" href="./css/projectDetail.css" />
		<link rel="stylesheet" href="./css/swiper.min.css">
		<script src="./js/vue.js"></script>
		<script src="./js/elementui.js"></script>
		<script src="js/jquery-3.3.1.min.js"></script>
		<script src="./js/swiper.min.js"></script>
		<!-- 微信 JS-SDK 如果不需要兼容小程序，则无需引用此 JS 文件 -->
		<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
		<!-- uni 的 SDK -->
		<script type="text/javascript" src="http://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.2.2.js"></script>
	</head>

	<body style='margin: 0;'>
		<div id='projectDetails' class='projectDetails'>
			<div class='imgBox'>
				<div class="swiper-container" v-if="carousels.length>0">
					<div class="swiper-wrapper">
						<div class="swiper-slide" v-for="item in carousels">
							<img :src="item" alt="">
							<!-- {{item}} -->
						</div>
					</div>
				</div>

				<div class='textBox' :style="{background: 'url('+img+') center center no-repeat',backgroundSize:'cover'}">
					<h3>{{title}}</h3>
					<p>
						<span>{{type}}</span>
						<span>{{status}}</span>
					</p>
				</div>
			</div>
			<div class="head-bottom" v-if="movieStatus !=='preheating'">
				<div class='textNumber'>
					<div>
						<h4>已购金额(元)</h4>
						<p>{{salesOfMoney}}</p>
					</div>
					<div>
						<span>达成率</span>
						<span>{{scale}}</span>
					</div>
					<div>
						<span>剩余份数</span>
						<span v-if="movieStatus ==='ing'">{{surplusNum}}份</span>
						<span v-if="movieStatus ==='pause' ||  movieStatus ==='bonus'|| movieStatus ==='finish'">{{movieStatusText}}</span>
					</div>
				</div>
				<div class='progress'>
					<el-progress :percentage="percent" :show-text='false' color="#FF1268" :stroke-width="10"></el-progress>
					<!--<p>目标筹集金额{{totalOfMoney}}万</p>-->
				</div>
			</div>


			<div class="condition orange" v-if="movieStatus==='preheating'">
				<div class="left_icon">
					<div class="line"></div>
					<i class='iconfont'>&#xe62d;</i>
				</div>
				<div class="textWrap">
					<span>项目预热中 </span>
					<span>请等待开放</span>
				</div>
				<div class="right_icon">
					<i class='iconfont'>&#xe62d;</i>
					<div class="line"></div>
				</div>
			</div>
			<!-- 认购流程 -->
			<div class='subscriptionProcess'>
				<h3>
					[
					<span>认购流程</span>]
				</h3>

				<div class='subScription'>
					<div class="item">
						<div>
							<i class='iconfont icon-dianying-copy'></i>
							<i class='right'>→</i>
						</div>
						<p>客户了解认购项目</p>
					</div>
					<div class="item">
						<div>
							<i class='iconfont icon-ic_paid'></i>
							<i class='right'>→</i>
						</div>
						<p>客户确认认购份数给视纪影视预定份额，并支付款项</p>
					</div>
					<div class="item">
						<div>
							<i class='iconfont icon-hetongdingdan'></i>
							<i class='right'>→</i>
						</div>
						<p>出品方签字合同生效后，出品方邮寄合同给购买客户</p>
					</div>
					<div class="item">
						<div>
							<i class='iconfont icon-woyaorongzi'></i>
						</div>
						<p>{{incomeDetail}}</p>
					</div>

				</div>

				<p class='indication'>
					<span @click='showDialog()'>风险提示</span>
					<i @click='showDialog()' class='iconfont icon-tishi'></i>
				</p>

			</div>

			<div class='subscriptionProcess notBorder'>
				<h3>
					[
					<span>详细介绍</span>]
				</h3>
				<div class='content' v-html='content'>
				</div>
			</div>
			<div class='readText'>
				<p>点击认购代表阅读并同意
					<span @click='model()'>《{{title}}版权样板合同》</span>
				</p>
				<!-- <p>产品有风险，理财需谨慎!</p> -->
				<!-- <p>根据票房收益获取投资利润，有可能分红金额低于购买金额！</p> -->
			</div>
			<!--<div class='bottomBar' v-if="movieStatus==='ing'">-->
			<!--<div class="left">-->
			<!--<div @click="share_Poup = true">-->
			<!--<p>-->
			<!--<i class='iconfont icon-fenxiang'></i>-->
			<!--<span>分享</span>-->
			<!--</p>-->

			<!--</div>-->
			<!--<div>-->
			<!--<p>-->
			<!--<i class='iconfont icon-jiagebaohu'></i>-->
			<!--<span>{{price}}/份</span>-->
			<!--</p>-->
			<!--</div>-->
			<!--</div>-->
			<!--<div class="right" @click="buy()">-->
			<!--立即认购-->
			<!--</div>-->
			<!--</div>-->

			<div class="footerFixed">
				<div class="wrap" v-if="movieStatus==='ing'">
					<div class="left">
						<div class="leftShare" @click="share_Poup=true">
							<i class='iconfont'>&#xe667;</i>分享</div>
						<div class="leftPrice" v-if="movieStatus==='ing'">
							<i class='iconfont'>&#xe603;</i>{{price}}/份</div>
					</div>
					<div v-if="movieStatus ==='ing'" class="buyBtn" @click="buy">立即认购</div>
				</div>

				<div class="preheating" v-if="movieStatus !=='ing'">
					<div class="left">
						<div @click="share_Poup=true">
							<i class='iconfont'>&#xe667;</i>分享</div>
					</div>
					<!-- 预热中 -->
					<div v-if="movieStatus==='preheating'" class="preheatingText">项目预热中 请等待开放</div>
					<!-- 停售 -->
					<div v-if="movieStatus==='pause'" class="preheatingText red">暂停销售 等待权益发放</div>
					<!-- 售卖完成 -->
					<div v-if="movieStatus==='finish'" class="preheatingText gray">项目结束 权益已发放</div>
					<!-- 待收益 -->
					<div v-if="movieStatus==='bonus'" class="preheatingText red">筹款成功 等待权益发放</div>

				</div>


			</div>


			<!--<div v-if='dialogVisible' class='indicationDialog'>-->
			<!--<div class='indication'>-->
			<!--<div class='dialogBox'>-->
			<!--<h3>亏本风险提示</h3>-->
			<!--<p>{{riskWarning}}</p>-->
			<!--<a @click="dialogVisible = false" href="javascript:;">知道了</a>-->
			<!--</div>-->
			<!--</div>-->

			<!--</div>-->

			<!-- 分享 -->

			<div v-if="share_Poup" class='sharePoup'>
				<div class="sharePoupWrap">
					<div class="top">
						<div class="item wachat" @click="shareWeixin">
							<div class="imgDiv">
								<img src="./image/wachat.png">
							</div>

							<span>微信</span>
						</div>
						<div class="item friends" @click="shareFriends">
							<div class="imgDiv">
								<img src="./image/friends.png">
							</div>
							<span>朋友圈</span>
						</div>
						<div class="item weibo" @click="shareWeibo">
							<div class="imgDiv">
								<img src="./image/weibo.png">
							</div>
							<span>新浪微博</span>
						</div>
					</div>
					<div class="bottom" @click="share_Poup = false">
						取消
					</div>
				</div>
			</div>

			<!-- 风险提示 弹出层 -->
			<div v-if='dialogVisible' class='indicationDialog'>
				<div class='indication'>
					<div class='dialogBox'>
						<h3>风险提示</h3>
						<p>{{riskWarning}}</p>
						<a @click="closeDialog" href="javascript:;">取消</a>
					</div>
				</div>
			</div>
			<!-- 认证提醒 -->
			<div v-if='certificationTip' class='certificationTip'>
				<div class='certification'>
					<div class='dialogBox'>
						<h3>温馨提示</h3>
						<p>根据国家相关监管政策要求，购买理财产品需实名认证。请实名认证后再认购产品。</p>
						<div class="btnGroup">
							<div class="btn cancel" @click="certificationTip = false">再看看</div>
							<div class="btn red" @click="certification">去认证</div>
						</div>
					</div>
				</div>
			</div>

		</div>

		<script type="text/javascript">
			let loaded = false;
			document.addEventListener("plusready", function() {
				if (loaded) plus.nativeUI.closeWaiting()
			})

			new Vue({
				el: '#projectDetails',
				data() {
					return {
						img: './image/projectBj.png',
						params: {
							movieId: '',
						},
						title: '',
						subtitle: '',
						incomeDetail: '',
						href: '',
						type: '',
						status: '',
						movieStatus: '',
						movieStatusText: '',
						salesOfMoney: '',
						percent: 0,
						scale: '',
						totalOfMoney: '',
						userLimit: '',
						carousels: [],
						price: '',
						surplusNum: '',
						riskWarning: '',
						content: '',
						deposit: '',
						dialogVisible: false,
						share_Poup: false,
						certificationTip: false,
						login: false,
						authTime: 0,
						authStatus: ''
					}
				},
				methods: {
					showDialog() {
						this.dialogVisible = true;
						// document.body.style.overflow = 'hidden';
					},
					closeDialog() {
						this.dialogVisible = false;
					},
					model() {
						console.log(this.params.movieId)
						uni.navigateTo({
							url: '../project/modelContract?movieId=' +
								this.params.movieId
						});
					},
					handleClose(done) {
						done()
					},
					share(platform, shareMessage) {
						if (typeof plus !== "undefined") {
							plus.share.getServices(function(shares) {
								for (let i = 0; i < shares.length; i++) {
									if (platform === shares[i].id) {
										let shareService = shares[i];
										shareService.authorize(function(r) {
											shareService.send(shareMessage, function() {
												// alert("分享成功！");
											}, function(e) {
												alert("分享失败：" + e.message);
											});
										}, function(e) {
											alert("未进行认证：" + e.message);

										});
										return
									}
								}
								alert("没有找到相应的分享通道，请确认您是否安装了该App！");

							}, function(e) {
								alert("获取分享服务列表失败：" + e.message);
							});

						} else {
							alert("您目前使用的环境不支持原生App分享！");
						}
						this.share_Poup = false
					},
					//分享到微信好友
					shareWeixin() {
						this.share('weixin', {
							type: 'web',
							title: this.title,
							content: this.subtitle,
							thumbs: ['../../static/image/logo.png'],
							href: this.href,
							extra: {
								scene: "WXSceneSession"
							}
						});

					},
					//分享到微信朋友圈
					shareFriends() {
						this.share('weixin', {
							type: 'web',
							content: this.title + ' —— ' + this.subtitle,
							thumbs: ['../../static/image/logo.png'],
							href: this.href,
							extra: {
								scene: "WXSceneTimeline"
							}
						});

					},
					shareWeibo() {
						this.share('sinaweibo', {
							type: 'web',
							content: this.subtitle,
							thumbs: ['../../static/image/logo.png'],
							href: this.href,
						});


					},
					getQueryString(name) {
						var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
						var r = window.location.search.substr(1).match(reg);
						if (r != null) {
							return unescape(r[2]);
						}
						return '';
					},
					//百分比
					getScale(num, total) {
						num = parseFloat(num);
						total = parseFloat(total);
						// if (isNaN(num) || isNaN(total)) {
						//   return "-";
						// }
						return total <= 0 ? 0 : Math.round((num / total) * 10000) / 100.0;
					},
					showDecimal(num, fixed) {
						let numObj = parseFloat(num / 100);
						return numObj.toFixed(fixed || 2);
					},
					fmoney(s, n) {
					
						n = n > 0 && n <= 20 ? n : 2;
					
						s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
					
						var l = s.split(".")[0].split("").reverse(),
							r = s.split(".")[1];
					
						var t = "";
					
						for (var i = 0; i < l.length; i++) {
					
							t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
					
						}
					
						return t.split("").reverse().join("") + "." + r;
					
					},
					
					getDetails() {
						let _this = this;
						this.params.movieId = this.getQueryString("id");
						this.login = this.getQueryString("login");
						this.authTime = this.getQueryString("authTime");
						this.authStatus = this.getQueryString("authStatus");
						this.href = "http://grys.nervenets.com/#/shareShow/projectDetails/" + this.params.movieId + '/false/0/init';
						$.ajax({
							url: "http://grys.nervenets.com/api/v1/movieDetail",
							method: 'post',
							data: this.params,
							success: function(json) {
								if (json.code === 200) {
									_this.title = json.data.info.title;
									_this.subtitle = json.data.info.subtitle;

									_this.incomeDetail = json.data.info.incomeDetail;
									_this.type = json.data.type.text;
									_this.status = json.data.releaseStatus.text;
									_this.movieStatus = json.data.status.value;
									_this.movieStatusText = json.data.status.text;
									// _this.salesOfMoney = json.salesOfMoney / 100;
									_this.salesOfMoney =_this.fmoney(
                                        json.salesOfMoney / 100
                                    );

									_this.percent = _this.getScale(json.salesOfMoney, json.data.totalOfMoney);
									_this.scale = _this.getScale(json.salesOfMoney, json.data.totalOfMoney) === 0 ? 0 : _this.getScale(
										json.salesOfMoney, json.data.totalOfMoney) + '%';

									_this.totalOfMoney = json.data.totalOfMoney / 1000000;
									if (json.data.info.userLimit) {
										_this.userLimit = json.data.info.userLimit;
									}
									_this.carousels = json.data.info.carousels;

									// console.log(this.carousels);
									_this.price = json.data.info.priceOfUnit / 100;
									_this.surplusNum =
										(json.data.totalOfMoney - json.salesOfMoney) / json.data.info.priceOfUnit;
									if (json.data.info.riskWarning) {
										_this.riskWarning = json.data.info.riskWarning;
									}

									_this.content = json.data.info.content;
									_this.deposit = _this.showDecimal(json.data.info.deposit);


									_this.$nextTick(function() {
										//swiper初始化
										let mySwiper = new Swiper('.swiper-container', {
											loop: true,
											observer: true, //修改swiper自己或子元素时，自动初始化swiper
											observeParents: false, //修改swiper的父元素时，自动初始化swiper
											autoplay: {
												disableOnInteraction: false,
												delay: 5000,
											},
											preventLinksPropagation: false // 阻止点击事件冒泡
										});
									})
								}
								loaded = true
								if (typeof plus !== "undefined") {
									plus.nativeUI.closeWaiting()
								}

								setTimeout(function() {
									let urls = [];
									$(".content img").each(function(index) {
										$(this).attr("index", index)
										urls.push($(this).attr("src"))
									})
									console.log(urls)
									$(".content img").click(function(index) {
										console.log($(this).attr("index"))
										if (typeof plus !== "undefined") {
											plus.nativeUI.previewImage(urls, {
												current: $(this).attr("index"),
												indicator: "number"
											})
										}
										console.log($(this).attr("src"))
									})
								}, 200)

							}
						});
					},

					certification() {
						this.certificationTip = false;
						if (this.authStatus == 'checking') {
							uni.navigateTo({
								url: '../my/toCertification3'
							});
						} else {
							uni.navigateTo({
								url: '../my/toCertification'
							});
						}
					},
					buy() {
						console.log(this.login);
						console.log(this.authTime);
						if (this.login == 'true') {
							if (this.authTime == 0) {
								this.certificationTip = true;
							} else {
								uni.navigateTo({
									url: './offerToBuy?price=' +
										this.price +
										'&userLimit=' +
										this.userLimit +
										'&deposit=' +
										this.deposit +
										'&movieId=' +
										this.params.movieId +
										'&surplusNum=' +
										this.surplusNum
								});
							}
						} else {
							console.log(1);
							uni.navigateTo({
								url: '../login/index'
							});
						}
					}
				},
				mounted() {

					this.share_Poup = false;
					this.certificationTip = false;
					console.log(this.certificationTip)
					document.title = '视纪影视';
					this.getDetails()
				}
			})
		</script>
	</body>
</html>
